import React, { Component } from 'react';
import {
    View,
    Platform,
    ProgressViewIOS,
    ProgressBarAndroid,
} from 'react-native';
import { WebView, } from 'react-native-webview';
import { Container } from '../component/container'

export default class WebViewScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            progress: 0,
            loading: true,
        }
    }

    _renderProgress() {
        const { progress } = this.state
        if (progress < 1) {
            return (
                <View style={{ position: 'absolute', width: '100%', top: 0, }}>
                    {Platform.OS == 'android' ?
                        <ProgressBarAndroid
                            indeterminate={false}
                            progress={progress}
                            styleAttr={'Horizontal'}
                        />
                        : <ProgressViewIOS
                            progress={progress}
                            progressViewStyle={'bar'}
                        />}
                </View>
            )
        }
    }

    render() {
        return (
            <Container naviBarProps={{ title: this.props.title, }}>
                {this._renderProgress()}
                <WebView
                    onLoadProgress={({ nativeEvent: { progress, url } }) => {
                        this.setState({
                            progress,
                            loading: progress < 0.8,
                        })
                    }}
                    source={{ uri: this.props.url }}
                    style={{ flex: 1, }} />
            </Container>
        )
    }
}